<template>
    <div>
        <div class="container_box">
            <el-button type="primary"
                       @click="$router.go(-1)">返回</el-button>
            <div class="order_stasus_box u-flex u-row-between">
                <div class=" u-flex">
                    <!-- 订单状态图 -->
                    <!-- <img class="order_status_img"
                         :src="orderDetail.status | statusImgFilter"> -->
                    <div class="u-flex-col">
                        <p class="order_status_title">{{ orderDetail.status | statusFilter }}</p>
                        <p class="order_text">订单创建：<span>{{ orderDetail.addTime }}</span></p>
                    </div>
                </div>

            </div>
            <!-- 订单info -->
            <div class="order_info_box u-flex u-flex-wrap">
                <p class="order_text margin-right">课程：<span>{{ orderDetail.items[0].productName }}</span></p>
                <p class="order_text margin-right">支付时间：<span>{{ orderDetail.updateTime }}</span></p>
                <p class="order_text margin-right">订单编号：<span>{{ orderDetail.orderSn }}</span></p>
                <div class="payment_box">
                    <p class="payment_num">¥{{ orderDetail.payAmount / 100 }}</p>
                    <p style="margin-top:15px;">实付款</p>
                </div>
            </div>
        </div>
        <div class="padding_box">
            <div class="container_box">
                <div class="order_title">课程信息</div>
                <el-divider></el-divider>
                <el-table header-row-class-name="order_header"
                          tooltip-effect="dark"
                          class="order_more_table"
                          :data="orderDetail.items"
                          style="width: 100%">
                    <el-table-column label="课程信息"
                                     width="400">
                        <template slot-scope="scope">
                            <div class="good_more_info">
                                <div class="order_item_box u-flex u-col-top">
                                    <img class="order_img"
                                         :src="scope.row.productPic">
                                    <div class="">
                                        <p class="order_title1 font-weight-500">{{ scope.row.productName }}</p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="guige"
                                     label="规格">
                        <template slot-scope="scope">
                            <span v-for="(skuItem,skuIndex) in JSON.parse(scope.row.skuData)"
                                  :key="skuIndex">{{ skuItem.name }}： {{ skuItem.value }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="priceDouble"
                                     label="价格（元）">
                        <template slot-scope="scope">
                            ￥{{ scope.row.priceDouble / 100 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="payAmountStr"
                                     label="实付款（元）">
                        <template slot-scope="scope">
                            <div class="payAmount-text font-weight-500">
                                ￥{{ scope.row.payAmount / 100 }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import { Loading } from 'element-ui';
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-td.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
export default {
    components: {
        tTable,
        tTh,
        tTr,
        tTd
    },
    data: function () {
        return {
            orderDetail: {
            },
            loading: false,
        };
    },
    filters: {
        statusFilter(status) {
            switch (status) {
                case 1000:
                    return '支付成功'
                case 73:
                    return '退款成功'
                case 81:
                    return '调课成功'
                case 20:
                    return '待付款'
                case 70:
                    return '退款中'
                case 80:
                    return '调课中'
            }
        },
        colorFilter(status) {
            if ([20, 70, 80,].indexOf(status) > -1) {
                return 'color:#E6A23C;'
            } else if (status == 10) {
                return 'color:#F96060;'
            } else if ([1000].indexOf(status) > -1) {
                return 'color:#1B93F8;'
            } else {
                return 'color:#999999;'
            }
        },
    },
    methods: {
        stopClick() {

        },

        // // 获取订单详情
        getOrderDetail() {
            let data = {
                id: this.$route.query.id
            }
            axios({
                url: 'admin/order/get',
                method: 'post',
                data
            }).then(result => {
                const { data } = result;
                this.orderDetail = data;
            }).catch(err => {
            })
        },
    },
    activated() {

    },
    created() {
        this.getOrderDetail()
    }

};
</script>
<style lang="scss" scoped>
/deep/.el-dialog__body {
    text-align: center;
}
.order_stasus_box {
    margin: 20px 0;
    .order_status_img {
        width: 26px;
        height: 26px;
        margin-right: 15px;
        margin-bottom: 17px;
    }
    .order_status_title {
        font-size: 18px;
        color: #333;
        font-weight: bold;
    }
}
.order_info_box {
    position: relative;
    margin-left: 40px;
    .margin-right {
        width: 26%;
        margin-top: 15px;
    }
    .payment_box {
        position: absolute;
        text-align: right;
        right: 0;
        font-size: 16px;
        color: #333;
        .payment_num {
            font-size: 24px;
            font-weight: bold;
        }
    }
}
.order_text {
    font-size: 16px;
    color: #999;
    span {
        color: #333;
    }
}
.order_title {
    color: #333;
    font-weight: bold;
}

.order-title {
    font-size: 14px;
}
.page-title::before {
    height: 20px;
}
.order_more_table {
    font-size: 14px;
    font-weight: bold;
    max-height: 350px;
    ::v-deep {
        .el-table__row {
            td:nth-of-type(2) {
                color: #999;
            }
        }
    }
}
.good_more_info {
    position: relative;
    .order_item_box {
        padding: 25px;
        .order_img {
            border-radius: 8px;
            width: 72px;
            height: 72px;
            margin-right: 8px;
        }
        .order_title1 {
            font-size: 14px;
            color: #333;
        }
        .order_guige {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
    }
}
.payAmount-text {
    color: #333;
}
::v-deep {
    .el-table th {
        background-color: #f0f0f0 !important;
    }
    .el-table--border,
    .el-table--group {
        border: 0;
    }
}
.enlarge-img {
    width: 16px;
    height: 16px;
    margin-top: 3px;
}
.commission_box {
    font-size: 14px;
    flex-wrap: wrap;
    .commission_item {
        width: 192px;
        height: 230px;
        background-color: #f5f5f5;
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 25px;
        .el-icon-plus {
            font-size: 40px;
        }
    }
    .commission_item:nth-of-type(3n-1) {
        margin: 0 25px 25px 25px;
    }
}
.lookImg {
    position: relative;
    .img-box {
        width: 80px;
        position: absolute;
        left: 0;
        top: 0;
        height: 28px;
        opacity: 0;
    }
}
</style>
<style lang="scss">
.el-table th {
    color: #333333;
}
.order_more_table {
    .el-table__footer {
        tr:nth-of-type(1) {
            font-weight: bold;
            td:nth-last-of-type(1) {
                color: #fa5858;
            }
            td:nth-last-of-type(2) {
                text-align: right;
            }
        }
    }
}
.el-image-viewer__wrapper {
    z-index: 5000 !important;
}
.t-table {
    margin: 15px 0 20px 0;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.mr10 {
    margin-right: 10px;
}
</style>